<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>后台-添加博客</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <!--bootstrap的js-->
<!--  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>-->
</head>
<body>
<div class="container-fluid p-1 bg-dark text-white text-center">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="/admin">添加博客</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/admin/manageBlog">管理博客</a>
    </li>
  </ul>
</div>

<div class="container mt-5 p-5 bg-primary">
  <div class="d-flex container bg-secondary mb-3" th:each="blog,blogStat:${blogList}">
    <div class="container">
      <h1 th:text="${blog.getTitle()}">title</h1>
      <p th:text="${blog.getDescription()}">DESCRIPTION</p>
    </div>
    <button type="button" class="btn btn-warning" th:attr="blog-id=${blog.getId()}" onclick="delBlog(this)">删除文章</button>
    <button type="button" class="btn btn-danger" th:attr="blog-id=${blog.getId()}"  onclick="modifyBlog(this)" data-bs-toggle="modal" data-bs-target="#myModal">修改文章</button>
  </div>
</div>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <form id="modifyForm" action="#" th:action="@{/admin/modify}" method="post">
          <div class="mb-3 mt-3 d-none" >
            <label for="blogId" class="form-label">Id:</label>
            <input class="form-control" id="blogId" name="blogId" >
          </div>
          <div class="mb-3 mt-3">
            <label for="title" class="form-label">Title:</label>
            <input class="form-control" id="title" placeholder="Enter title" name="title" >
          </div>
          <div class="mb-3">
            <label for="content" class="form-label">Content:</label>
            <input class="form-control" id="content" placeholder="Enter content" name="content">
          </div>
          <div class="mb-3">
            <label for="description" class="form-label">Description:</label>
            <input class="form-control" id="description" placeholder="Enter description" name="description">
          </div>
        </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
        <button type="submit" form="modifyForm" class="btn btn-primary" >Submit</button>
      </div>

    </div>
  </div>
</div>




<!--bootstrap的js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!--axios-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

  function delBlog(that)
  {
    axios({
      method:'delete',
      url:'http://localhost:8081/admin/delBlog',
      params:{
        id:that.getAttribute("blog-id") //把转换的字符串传过去
      }
    }).then(res=>{
      console.log(res);
    });
    alert(that.getAttribute("blog-id"));
  }

  async function modifyBlog(that)
  {
    alert(that.getAttribute("blog-id"));
    // 从服务器取回数据
    const blogId = that.getAttribute("blog-id");
    // 如果要在路径中直接携带参数，要用反单引号
    const blog = await axios({url:`http://localhost:8081/admin/blog/${blogId}`})
    const title = blog.data.title
    const content = blog.data.content
    const description = blog.data.description
    $("#blogId").val(blogId)
    $("#title").val(title)
    $("#content").val(content)
    $("#description").val(description)
    console.log(blog.data.content)
    // 将数据渲染在页面上  弹出一个model，然后
    // 将修改后的数据重新渲染在
  }




</script>
</html>